<template>
	<view class="bigreser">
		<uni-nav-bar title="家庭教育信息收集" left-icon="left" @clickLeft="backpage"></uni-nav-bar></navbar>
		<view class="res-bot">
				<view class="" v-for="(item,index) in educationdetail" :key="item.id" >
					<uni-card >
						<view class="theline">
							<view class="line-right" >
								<view style="font-weight: 600;font-size: 32rpx;">
									{{item.title}}
								</view>
								
							</view>
							
						
						</view>
						<view class="packdetail">
							<view class="packdetail_left" v-for="(itemdi,indexdi) in item.list" :key="itemdi.sid"
								@click.stop="clickedu(item.id,itemdi.sid)">
								
								{{itemdi.title}}
								<uni-icons type="right" size="16" color="#d2507e"></uni-icons>
							</view>
							
						</view>
					</uni-card>
				</view>

			<view class="power"  >
				<label class="radio" :style="{bottom:bottom_height}">
					<radio :checked="powerstate"  />
					<view style="font-weight: 600;font-size: 24rpx;">
						因虚假信息而引发的任何后果，一概由填表人负责，与本站无关。
					</view>
				</label>

			</view>
			<!-- 立即预约 -->
			<view class="butt">
				<button  @tap="online">立即预约</button>
			</view>
			<uni-drawer class="drawercolor" ref="show00left" mode="right" :width='280'>
				<scroll-view style="height: 100%;" scroll-y="true">
					<view class="saveview">
						<button @click="savemsg(0,0)" type="primary" size="mini" class="savebut">保存信息</button>
					</view>
					<view class="" >
						<view class="bigtitle">
							父亲
						</view>
						<view class="mimititle">
							<view class="left">
								年龄:
							</view>
							<uni-easyinput placeholder="请输入年龄" trim  v-model=" Member_structure_table.father_age"></uni-easyinput>
						</view>
						<view class="mimititle">
							<view class="left">
								职业:
							</view><uni-easyinput placeholder="请输入职业" trim v-model=" Member_structure_table.father_occ"></uni-easyinput>
							
						</view>
					</view>
										<view class="" >
											<view class="bigtitle">
												母亲
											</view>
											<view class="mimititle">
												<view class="left">
													年龄:
												</view>
												<uni-easyinput placeholder="请输入年龄" trim type="number" v-model="Member_structure_table.mother_age"></uni-easyinput>
											</view>
											<view class="mimititle">
												<view class="left">
													职业
												</view>
												<view class="">
													<uni-easyinput placeholder="请输入职业" trim v-model="Member_structure_table.mother_occ"></uni-easyinput>
												</view>
												
											</view>
										</view>
										<view class="" >
											<view class="bigtitle">
												孩子具体情况
											</view>
											<view class="mimititle">
												<view class="left">
													年龄:
												</view>
												<uni-easyinput placeholder="请输入年龄" trim type="number" v-model="Member_structure_table.children_age"></uni-easyinput>
											</view>
											<view class="mimititle">
												<view class="left">
													性别
												</view>
												<view class="">
													<uni-easyinput placeholder="请输入职业" trim v-model="Member_structure_table.children_sex"></uni-easyinput>
												</view>
												
											</view>
											<view class="mimititle">
												<view class="left">
													年级
												</view>
												<view class="">
													<uni-easyinput placeholder="请输入年级" trim v-model="Member_structure_table.children_class"></uni-easyinput>
												</view>
												
											</view>
										</view>
				</scroll-view>
			</uni-drawer>
			<uni-drawer class="drawercolor" ref="show01left" mode="right" :width='280'>
				<scroll-view style="height: 100%;" scroll-y="true">
					<view class="saveview">
						<button @click="savemsg(0,1)" type="primary" size="mini" class="savebut">保存信息</button>
					</view>
					
					<view class="">
						<view class="bigtitle">
							态度和价值观描述:
						</view>
						<uni-easyinput type="textarea" autoHeight  placeholder="描述自己对教育的态度和教育的价值观念。可以包括对教育的重视程度、对孩子成长的期望、教育方法的偏好等" v-model="ConceptandAtmosphere.attitude"></uni-easyinput>

						
					</view>
					<view class="">
						<view class="bigtitle">
							教育方式选择:
						</view>
						 <uni-data-select
						  v-model="ConceptandAtmosphere.edu_select"
						  :localdata="Educationselectionbox"
						  @change="change"
						></uni-data-select>
					
						
					</view>
					<view class="">
						<view class="bigtitle">
							学习氛围描述:
						</view>
						<uni-easyinput type="textarea" autoHeight  placeholder="描述家庭中的学习氛围，包括是否有固定的学习时间和空间、家长是否会参与孩子的学习等" v-model="ConceptandAtmosphere.atmosphere"></uni-easyinput>
								
						
					</view>
					
					<view class="">
						<view class="bigtitle">
							学习环境选择:
							
						</view>
						 <uni-data-select
						  v-model="ConceptandAtmosphere.stu_select"
						  :localdata="Learningenvironment"
						  @change="change"
						></uni-data-select>
					
						
					</view>
					<view class="">
						<view class="bigtitle">
							家长参与程度:
							
						</view>
						 <uni-data-select
						  v-model="ConceptandAtmosphere.Degree"
						  :localdata="Parentalinvolvement"
						  @change="change"
						></uni-data-select>
					
						
					</view>
					<view class="">
						<view class="bigtitle">
							家庭教育活动:
						</view>
						 <uni-data-select
						  v-model="ConceptandAtmosphere.Eduactivity"
						  :localdata="Familyeducationactivities"
						  @change="change"
						></uni-data-select>
					
						
					</view>
				</scroll-view>
			</uni-drawer>
			
			<uni-drawer class="drawercolor" ref="show03left" mode="right" :width='280'>
				<scroll-view style="height: 100%;" scroll-y="true">
					<view class="saveview">
						<button @click="savemsg(0,3)" type="primary" size="mini" class="savebut">保存信息</button>
					</view>
					
					<view class="">
						<view class="bigtitle">
							家庭教育困惑:
						</view>
						<uni-easyinput type="textarea" autoHeight  placeholder="描述目前在家庭教育中遇到的困惑和挑战" v-model="eduquestion"></uni-easyinput>
					
						
					</view>
				</scroll-view>
			</uni-drawer>
			
			<uni-drawer class="drawercolor" ref="show10left" mode="right" :width='280'>
				<scroll-view style="height: 100%;" scroll-y="true">
					<view class="saveview">
						<button @click="savemsg(1,0)" type="primary" size="mini" class="savebut">保存信息</button>
					</view>
					<view class="">
						<view class="bigtitle">
							性格类型选择:
							
						</view>
						 <uni-data-select
						  v-model="Characteristic_situation.character_select"
						  :localdata="Personalitytype"
						  @change="change"
						></uni-data-select>
					
						
					</view>
					<view class="">
						<view class="bigtitle">
							兴趣爱好描述:
						</view>
						<uni-easyinput type="textarea" autoHeight  placeholder="孩子的兴趣爱好，包括喜欢的学科、课外活动" v-model="Characteristic_situation.hobby"></uni-easyinput>
					
						
					</view>
					<view class="">
						<view class="bigtitle">
							成绩和学习方法描述:
						</view>
						<uni-easyinput type="textarea" autoHeight  placeholder="描述孩子目前的学习成绩和学习方法，包括学科成绩、学习习惯" v-model="Characteristic_situation.styDescription"></uni-easyinput>
					
						
					</view>

				</scroll-view>
			</uni-drawer>
			
			<uni-drawer class="drawercolor" ref="show20left" mode="right" :width='280'>
				<scroll-view style="height: 100%;" scroll-y="true">
					<view class="saveview">
						<button @click="savemsg(2,0)" type="primary" size="mini" class="savebut">保存信息</button>
					</view>
					<view class="">
						<view class="bigtitle">
							教育期望:
						</view>
						<uni-easyinput type="textarea" autoHeight  placeholder="描述自己对孩子教育的期望，包括学习成绩、个性发展、能力培养等方面的期望" v-model="Expectationsandneeds.expectations"></uni-easyinput>
					
						
					</view>
					<view class="">
						<view class="bigtitle">
							需要获得的帮助:
						</view>
						<uni-easyinput type="textarea" autoHeight  placeholder="描述自己在孩子教育方面需要获得的帮助，可以包括教育资源、指导建议、专业支持等" v-model="Expectationsandneeds.needs"></uni-easyinput>
					
						
					</view>
			
				</scroll-view>
			</uni-drawer>
			
		</view>

	</view>
</template>

<script>
	import mpvueCityPicker from '../../components/uni/mpvue-citypicker/mpvueCityPicker.vue'
	
	import UniDatetimePicker from '@/components/uni/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'
	import mline from '@/components/common/Lines.vue'
	import $http from '@/common/api/request.js'
	export default {
		data() {
			return {
				educationdetail:[
					{id:0,title:"家庭背景信息",list:[
						{sid:0,title:"家庭成员结构"},
						{sid:1,title:"家庭教育观念"},
						{sid:2,title:"教育氛围"},
						{sid:3,title:"家庭遇到的教育问题"}]},
					{id:1,title:"孩子个性特点和学习情况",list:[
						{sid:0,title:"孩子的性格类型"},
						{sid:1,title:"孩子的兴趣爱好"},
						{sid:2,title:"孩子的学习成绩和学习方法"},]},
					{id:2,title:"家长的期望和需求",list:[
						{sid:0,title:"对孩子教育的期望"},
						{sid:1,title:"家长需要获得的帮助"}]},
				
				],
				Educationselectionbox:[ { value: 0, text: "传统教育" },
										{ value: 1, text: "现代教育" },
										{ value: 2, text: "启发式教育" },],
				// <!-- 例如独立学习、家庭学习、辅导班学习等。 -->
				Learningenvironment:[ { value: 0, text: "独立学习" },
										{ value: 1, text: "家庭学习" },
										{ value: 2, text: "辅导班学习" },],
				// <!-- 例如主导式教育、辅导式教育、合作式教育等 -->
				Parentalinvolvement:[ { value: 0, text: "主导式教育" },
										{ value: 1, text: "辅导式教育" },
										{ value: 2, text: "合作式教育" },],
				// <!-- 家庭阅读、科普实验、艺术创作等。 -->
				Familyeducationactivities:[ { value: 0, text: "家庭阅读" },
										{ value: 1, text: "科普实验" },
										{ value: 2, text: "艺术创作" },],
				// <!-- 内向、外向、活泼。 -->
				Personalitytype:[ { value: 0, text: "内向" },
										{ value: 1, text: "外向" },
										{ value: 2, text: "活泼" },],
				Member_structure_table:{
					father_age:"",
					father_occ:"",
					mother_age:"",
					mother_occ:"",
					children_age:"",
					children_sex:"",
					children_class:""
				},
				ConceptandAtmosphere:{
					attitude:"",
					atmosphere:"",
					edu_select:"",
					stu_select:"",
					Degree:"",
					Eduactivity:""
				},
				eduquestion:"",//教育困惑
				Characteristic_situation:{
					character_select:"",
					hobby:"",
					styDescription:""
				},
				Expectationsandneeds:{
					expectations:"",
					needs:""
				},
				bottom_height:"",//远离底部
				powerstate:"",
				rules: {
					stutel: {
						rule: /^1[3456789]\d{9}$/,
						msg: "电话号码格式错误"
					},
					situation: {
						rule: /.{5,200}$/,
						msg: "学员情况尚未填写,请填写5~200字内容"
					}

				}
			};
		},

		methods: {
			//正则校验函数:
			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this[key])) {
					uni.showToast({
						title: this.rules[key].msg,
						icon: "none"
					})
					bool = false;
					return bool;
				}
				return bool;
			},
			getbottomheight(){
				const query = uni.createSelectorQuery().in(this);
				query
				  .select(".reser-img")
				  .boundingClientRect((data) => {
					  this.bottom_height = data.height + 'px'
					
				  })
				  .exec();
			},
			clickedu(index_1,index_2){
				if(index_1 == 0 && index_2 == 0){
					this.$refs.show00left.open();
					this.getresdate(index_1,index_2)
				}else if(index_1 == 0 && (index_2 == 1 || index_2 == 2)){
					this.$refs.show01left.open();
					this.getresdate(index_1,index_2)
				}else if(index_1 == 0 && index_2 == 3){
					this.$refs.show03left.open();
					this.getresdate(index_1,index_2)
				}else if(index_1 == 1 ){
					this.$refs.show10left.open();
					this.getresdate(index_1,index_2)
				}else if(index_1 == 2 ){
					this.$refs.show20left.open();
					//发起请求获取数据:
					this.getresdate(index_1,index_2)
				}
			},
			closeDrawer() {
				this.$refs.show03left.close();
			},
			change(){
				console.log(1);
			},
			//保存信息:
			savemsg(index_1,index_2){
				$http.request({
					url: "/save/reservation",
					method: "POST",
					header: {
						token: true
					},
					data:{
						index_1,
						index_2,
						savedata:this.getdatawhat(index_1,index_2)
					}
				}).then((res) => {
					uni.showToast({
						title:res.msg,
						icon:"none",
						
					})
				})
			},
			// 获取数据
			getresdate(index_1,index_2) {
				$http.request({
					url: "/reservation_s",
					method: "POST",
					header: {
						token: true
					},
					data:{
						index_1,
						index_2
					}
				}).then((res) => {
					console.log(res);
					if(res.code == 200){
						//有赋值:
						this.unscrambledata(res.index_1,res.index_2,res.data_reservation)
					}else if(res.code == 203){
						uni.showToast({
							title:res.msg,
							icon:"none",
							duration:800
						})
					}
					else if(res.code == 408){
						uni.showToast({
							title:res.msg,
							icon:"none",
							duration:1200,
							mask:true
						})
						
					}
				}).catch(() => {
					uni.showToast({
						title: "错误",
						icon:"error"
					})
				})
			},
			getdatawhat(index_1,index_2){
				if(index_1 == 0 && index_2 == 0){
					return this.Member_structure_table
				}else if(index_1 == 0 && (index_2 == 1 || index_2 == 2)){
					return this.ConceptandAtmosphere
				}else if(index_1 == 0 && index_2 == 3){
					return this.eduquestion
				}else if(index_1 == 1 ){
					return this.Characteristic_situation
				}else if(index_1 == 2 ){
					return this.Expectationsandneeds
					
				}
			},
			//解读获取的数据赋值:
			unscrambledata(index_1,index_2,readdata){
				
				if(index_1 == 0 && index_2 == 0){
					
					for (const key in this.Member_structure_table) {
					  if (readdata.hasOwnProperty(key)) {
					    this.Member_structure_table[key] = readdata[key];
					  }
					}
					
				}else if(index_1 == 0 && (index_2 == 1 || index_2 == 2)){
					this.ConceptandAtmosphere.attitude = readdata.Attitudevalue;
					this.ConceptandAtmosphere.atmosphere = readdata.Atmospheredescription;
					this.ConceptandAtmosphere.edu_select = readdata.Educationalmode;
					this.ConceptandAtmosphere.stu_select = readdata.Learningenvironment;
					this.ConceptandAtmosphere.Degree= readdata.Degree;
					this.ConceptandAtmosphere.Eduactivity= readdata.environmentactivity;
					
				}else if(index_1 == 0 && index_2 == 3){
					this.eduquestion = readdata.content
					
				}else if(index_1 == 1 ){
					this.Characteristic_situation.character_select = readdata.Personalitytype;
					this.Characteristic_situation.hobby = readdata.Hobbies;
					this.Characteristic_situation.styDescription = readdata.Achievementlearningmethod
					
				}else if(index_1 == 2 ){
					this.Expectationsandneeds.expectations = readdata.expectations
					this.Expectationsandneeds.needs = readdata.needs
				}
			},
			
			//退后函数回调:
			backpage() {
				uni.navigateTo({
					url: `/pages/reservation/reservation`
				})
			},
			online(){
				uni.navigateTo({
					url:"/pages/vipcourseteacherlist/index"
				})
			}
		},
		components: {
			mpvueCityPicker,
			UniDatetimePicker,
			mline,
			
		},
		computed: {
			
		},
		onReady() {
			
		},
		onLoad(e) {
			
		}
	}
</script>

<style lang="scss">
	.saveview{
		position: relative;
		height: 80rpx;
		.savebut{
			position: absolute;
			right: 0;
			top: 0;
			background-color: #ac4c7a;
			color: #FFF;
			line-height: 70rpx;
			text-align: center;
		}
	}
	
	.theline {
		margin-top: 30rpx;
		padding: 10rpx 20rpx;
		height: 40rpx;
		color:#d15480;
		.line-right {
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			align-self: center;
	
		}
	}
	.packdetail {
		padding: 10rpx 30rpx;
		
		.packdetail_left {
			border-radius: 10rpx;
			padding: 10rpx 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;
			font-weight: 600;
			font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		}
	
		.packdetail_right {
			width: 70%;
			margin-left: 10rpx;
		}
	
	}
	
	.bigtitle{
		padding: 10rpx 15rpx;
		color: #ac4c7a;
		font-weight: 600;
	}
	.mimititle{
		padding: 10rpx 15rpx;
		display: flex;
		align-items: center;
		
		.left{
			padding: 0 10rpx;
			color: #ac4c7a;
			font-weight: 600;
		}
	}
	.drawercolor{
		color: #21252b;
	}
	.bigreser {
		background-color: #f8e9f0;
		
		height: 100vh;


		.res-bot {

			.name,
			.tel,

			{
			display: flex;
			border-bottom: 1rpx solid #15aeff;

			.n-name {
				font-size: 30rpx;
				padding: 20rpx;
				margin-right: 20rpx;
			}

			.n-inp {

				height: 68rpx;
				width: 60%;
			}
		}

		.butt {
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
		}

		.sex-list {
			display: flex;

			.list-tit {
				display: flex;
				padding: 0 5rpx;
			}
		}

		.sit-text {
			width: 100%;
			border: 1rpx solid #15aeff;
		}
	}

	.uni-list-cell {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		border-bottom: 1rpx solid #15aeff;
		font-size: 30rpx;
		padding: 20rpx 20rpx;

		.uni-list-cell-left {}
	}

	.reserva-detal {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 999;

		.pop-mask {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .6);
		}

		.pop-box {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			background-color: #ffffff;
			border-radius: 30rpx;

			.pop-btitle {
				text-align: center;
			}

			.pop-top {
				display: flex;
				padding: 20rpx 20rpx;

				.pop-img {
					width: 40%;
					height: 360rpx;
				}

				.pop-img-right {
					width: 50%;
					flex-wrap: wrap;
					align-items: flex-end;
					padding: 5rpx 20rpx;
					margin-top: 175rpx;
				}
			}

			.pop-line {
				font-size: 28rpx;

				.line-top {}

				.line-moy {
					padding: 10rpx;
				}

			}

			.pop-sub {
				z-index: 9999;
				line-height: 80rpx;
				background-color: #498DFB;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
	}

	.power {
		padding: 20rpx 10rpx;
		position: relative;
		left: 0;
		.radio {
			display: flex;
		}
	}
</style>